<!-- 商品列表页面 
1 titleNView //设置了可输入框框 导航条不见了
-->
<template>
	<view>

		<!-- #ifdef MP-WEIXIN -->
		<!-- 只编译到微信小程序端 -->
		<view class="list-inputs" style="height: 44px;" @tap="weitabs">
			<view class="uni-icon uni-icon-search list-inputsptext"> 点击搜索框跳转专属搜索页面</view>
		</view>
		<!-- #endif -->

		<Lines />

		<view class='list'>

			<!--左侧滑动-->
			<scroll-view scroll-y="true" class='list-left' :style="'height:'+clentHeight+'px;'">
				<view v-for='(item,index) in leftData' :key='index' @tap="changeLeftTab(index,item.id)">
					<view class='left-name' :class=' activeIndex ===index ?"left-name-active":"left-item" '>{{item.name}}</view>
				</view>
			</scroll-view>

			<!--右侧滑动-->
			<scroll-view scroll-y="true" class='list-right' :style="'height:'+clentHeight+'px;'">

				<view class='righ-list' v-for='(item,index) in rightData' :key='index'>
					<block v-for='(k,i) in item' :key='i'>
						<view class='list-title'>{{k.name}}</view>
						<view class='right-content'>
							<view class='right-item' v-for='(j,idx) in k.list' :key='idx'>
								<image class='right-img' :src="j.imgUrl" mode=""></image>
								<view class='right-name'>{{j.name}}</view>
							</view>
						</view>
					</block>
				</view>

			</scroll-view>
		</view>
		<Tabbar cureentPage='list'></Tabbar>
	</view>
</template>


<script>
	//更具获取纯css填充屏幕 也是可以的	
	import $http from '@/common/api/request.js'
	import Lines from '@/components/common/Lines.vue'
	import Tabbar from '@/components/common/Tabbar.vue'
	export default {
		data() {
			return {
				clentHeight: 0,
				activeIndex: 0,
				//左侧数据
				leftData: [],
				//右侧数据
				rightData: []
			}
		},
		//获取可视高度
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					// this.clentHeight = res.windowHeight - uni.upx2px(80)- this.getClientHeight();
					this.clentHeight = res.windowHeight - this.getClientHeight();
					console.log("this.clentHeight", this.clentHeight);
				}
			})
		},
		onLoad() {
			this.getData();
		},
		components: {
			Lines,
			Tabbar
		},
		methods: {
			//请求数据方法
			getData(id) {
				if (id === (this.activeIndex + 1)) {
					return;
				}

				$http.request({
					url: "/goods/list"
				}).then((res) => {
					let leftData = [];
					let rightData = []
					res.forEach(v => {
						leftData.push({
							id: v.id,
							name: v.name
						})
						//如果点击的id值相同
						if (v.id === (this.activeIndex + 1)) {
							rightData.push(v.data);
						}
					})
					this.leftData = leftData;
					this.rightData = rightData;

				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			//获取可视区域高度【兼容】
			getClientHeight() {
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if (system === 'ios') {
					return 44 + res.statusBarHeight;
					// return res.statusBarHeight;
				} else if (system === 'android') {
					return 44 + res.statusBarHeight;
					// return res.statusBarHeight;
				} else {
					return 0;
				}
			},
			//左侧点击事件
			changeLeftTab(index, id) {
				this.getData(id);
				this.activeIndex = index;
			},
			weitabs() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		},
		//input输入框点击事件
		// https://uniapp.dcloud.net.cn/tutorial/page.html#onreachbottom
		onNavigationBarSearchInputClicked(e) {
			console.log("input输入框点击事件", e);
			uni.navigateTo({
				url: '/pages/search/search'
			})
		},
		onNavigationBarButtonTap(e) {
			console.log("input输入框点击事件www", e);
		},
		//注意！！！
		//1.在page页面一定要注释//"disabled":true  这句话！
		//2.在methods内使用
		//监听原生标题栏搜索输入框输入内容变化事件（实时打印）
		onNavigationBarSearchInputChanged(e) {
			console.log(e.text) //打印输入框值
		},
		//监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
		onNavigationBarSearchInputConfirmed(e) {
			console.log(e.text) //打印输入框值
		}

	}
</script>

<style scoped>
	.list {
		display: flex;
	}

	.list-left {
		width: 200rpx;
	}

	.left-item {
		border-bottom: 2rpx solid #FFFFFF;
		font-size: 28rpx;
		font-weight: bold;
		background-color: #F7F7F7;
	}

	.left-name {
		padding: 30rpx 6rpx;
		text-align: center;
	}

	.left-name-active {
		border-left: 8rpx solid #49BDFB;
		background-color: #FFFFFF;
	}

	.list-right {
		flex: 1;
		padding-left: 30rpx;
	}

	.list-title {
		font-weight: bold;
		padding: 30rpx 0;
	}

	.right-content {
		display: flex;
		flex-wrap: wrap;
	}

	.right-item {
		width: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx;
	}

	.right-name {
		padding: 16rpx 0;
	}

	.right-img {
		width: 150rpx;
		height: 150rpx;
	}

	.list-inputs {
		width: 100%;
		border-radius: 20px;
		/* background: #F7F7F7; */
		height: 44px;
		line-height: 44px;
		/* background-color: red; */
		background-color: #F7F7F7;
	}

	.list-inputsptext {
		display: flex;
		align-items: center;
		height: 44px;
		padding: 0 20px;
		font-size: 30rpx;
	}

	/* 更具获取纯css填充屏幕 也是可以的 ：必须要有文字 */
	.commodity-order-html {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
</style>